.page-activities {
  .banner {
		position: relative;
		height: 540px;
		.slide {
			.slick-slide>div {
				position: relative;
			}
			.item-inner {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 2;
			}
			h2 {
				margin-top: 60px;
				text-align: center;
				p {
					color:rgba(255,255,255,1);
				}
	
				p:first-child {
					font-size:22px;
					font-family:PingFangSC-Regular;
					font-weight:400;
				}
	
				p:last-child {
					font-size:74px;
					font-family:PingFangSC-Semibold;
					font-weight:600;
				}
			}
		}
		.img {
			height: 540px;
			background-position: center;
			background-size: cover;
		}
		.header {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 99;
		}
    &>.inner {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1200px;
      padding-top: 211px;
      margin: 0 auto;
      text-align: center;
    }
  }
  .bottom {
    background: rgba(246, 248, 255, 1);
  }
  .contain {
    .inner {
      width: 1200px;
      margin: 0 auto;
      .content {
        display: flex;
				justify-content: space-between;
      }
      .top,
      .content {
				padding-bottom: 60px;
        &>p {
					text-align: center;
          font-size: 34px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
					padding-top: 76px;
					padding-bottom: 50px;
					margin-bottom: 0;
        }
        .box {
					display: flex;
					justify-content: space-between;
					.item {
						width: 285px;
						position: relative;
						overflow: hidden;
						box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);

						&:hover .caption {
							opacity: 1;
							transform: perspective(600px) rotateX(0deg);
						}

						img {
							width: 100%;
							left: 0;
							bottom: 0;
							position: relative;
							transition: all 0.3s;
						}

						.caption {
							display: flex;
							justify-content: space-between;
							align-items: center;
							background: rgba(246, 248, 255, 1);
							width: 100%;
							height: 40px;
							bottom: 0;
							position: absolute;
							left: 0;
							transform-origin: bottom;
							transform: perspective(600px) rotateX(90deg);
							overflow: auto;
							padding: 0 15px;
							opacity: 0;
							transition: all 0.3s;
							p {
								margin-bottom: 0;
							}
						}

						.icon {
							transition: all 0.3s;
							border: 1px solid rgba(0, 0, 0, 0.65);
							border-radius: 50%;
							color: rgba(0, 0, 0, 0.65);
							display: block;
							float: right;
							width: 24px;
							height: 24px;
							line-height: 24px;
							text-align: center;
							text-decoration: none;
							opacity: 0.3;
							cursor: pointer;

							&:hover {
								opacity: 1;
							}
						}
					}
				}
				.mod-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 113px;
					span:first-child {
						font-size: 24px;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
					span:last-child {
						cursor: pointer;
						font-family:PingFangSC-Light;
						font-weight:300;
						color:rgba(153,153,153,1);
						&:hover {
							color:rgba(153,153,153,0.8);
						}
					}
				}
        .left {
          .item {
            display: flex;
            align-items: center;
            width: 830px;
            height: 130px;
            padding: 20px;
            margin-bottom: 20px;
						background: rgba(255, 255, 255, 1);
						cursor: pointer;
						&:hover {
							transition: 0.25s;
							box-shadow:0px 2px 10px 0px rgba(0,0,0,0.06);
						}
            .img {
              width: 120px;
              height: 90px;
							background: #efefef;
							margin-right: 27px;
            }
            .text {
							&>div:nth-of-type(1) {
								font-family:PingFangSC-Regular;
								font-weight:400;
								color:rgba(102,102,102,1);
								margin-bottom: 18px;
							}

							&>div:nth-of-type(2) {
								font-family:PingFangSC-Light;
								font-weight:300;
								color:rgba(153,153,153,1);
							}
						}
						h2.title {
							font-size: 16px;
							font-family: PingFangSC-Medium;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
							margin-bottom: 10px;
						}
					}
        }
        .box {
					background: #fff;
					margin-bottom: 0;
        }
        .right {
          width: 340px;
					
					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
            height: 113px;
					}

					ul {
						height: 430px;
						padding: 20px;
						margin-bottom: 0;
						background-color: #fff;

						li {
							margin-bottom: 28px;
						}

						p {
							text-align: justify;
							margin-bottom: 0;
							font-family:PingFangSC-Light;
							font-weight:300;
							color:rgba(51,51,51,1);
							margin-bottom: 6px;
							cursor: pointer;

							&:hover {
								color:rgba(51,51,51,0.8);
							}
						}

						div {
							font-size:12px;
							font-family:PingFangSC-Light;
							font-weight:300;
							color:rgba(153,153,153,1);
						}
					}
        }
      }
    }
  }
}
